<template>
  <div>
    <h1>app</h1>
    <!-- 输入学号查询对应学号的学生的成绩 -->
    <input type="text" v-model="stu_id" />
    <button @click="getScore">请求01学生的入学成绩</button>
    <ul>
      <li v-for="itemInner in item" :key="itemInner.stu_id">
        <p>{{ itemInner.stu_id }}</p>
        <p>{{ itemInner.stu_name }}</p>
        <p>{{ itemInner.chinese }}</p>
        <p>{{ itemInner.math }}</p>
        <p>{{ itemInner.english }}</p>
        <p>{{ itemInner.lizong }}</p>
        <p>{{ itemInner.wenzong }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: [],
      stu_id: "",
    };
  },
  async mounted() {
    console.dir(this.$http);
    // vm 或组件对象  $http  get post能发送请求
    // 一种是页面加载默认就有的  create mounted
    // 二种 用户和浏览器交互动作之后触发 发送请求返回数据   回调函数

    //get 请求
    /*  this.$http
      .get("http://localhost:8000/search_info_not")
      .then((res) => {
        console.log(res.body);
      })
      .catch((err) => {
        console.log(err);
      }); */
    let url = "http://localhost:8000/search_info_not";
    // 处理异常
    try {
      let result = await this.$http.get(url);
      console.log(result.body);
    } catch (err) {
      console.log(err);
    }
  },
  methods: {
    async getScore() {
      let url = `http://localhost:8000/search_entry/${this.stu_id}`;
      let result = await this.$http.get(url);
      console.log(result);
      this.item = result.body;
      console.log(this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>